<!DOCTYPE html>
<html>
  <head>
    <script src="static/js/script.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@3.3.122/build/pdf.min.js"></script>
    <link rel="stylesheet" href="static/css/styles.css">
  </head>
  <body>
    <form id='url' style="margin-top: 320px; margin-bottom: 20px; width: 100%; text-align: center;">
        <input type="text" name="pdf-url" placeholder="Enter URL" style="color: lightgray; padding: 10px; border: none; background-color: black; font: 1.2em Roboto; font-style: italic; width: 100%; text-align: center">
    </form>

    <p style="color: white; margin: 10px; /* padding: 10px; */ /* border-radius: 10px; */ /* background-color: grey; */ width: fit-content; /* max-width: 80%; */ text-align: start; overflow-wrap: break-word; /* font-style: normal; */ font-variant-caps: normal; /* font-weight: normal; */ /* font-stretch: normal; */ /* font-size: 1.2em; */ line-height: normal; font-family: Roboto;">or</p>

    <form id="up" style="margin-top: 50px; margin-left: 15px;" enctype="multipart/form-data">
      <label for="file-input" class="upload-btn">Upload PDF</label>
      <input type="file" accept=".pdf" id="file-input"/>
    </form>
    <div id="container">
        <iframe id="pdf-viewer" class="pdf-viewer" style="border-width: 0"></iframe> 
        <div style="width: 40%; height: 100vh; border: none; background-color: black; display: flex; flex-direction: column; align-items: center; justify-content: space-between;">
            <div id="chat" style="height: 100%; overflow-y: scroll; background-color: black;">
              <!-- Chat messages go here -->
            </div>
            <form style="display: flex; padding-left: 10px; margin-bottom: 10px; width: 100%;">
              <input type="text" name='chat' style="font-size: 14px; flex-grow: 2; padding: 10px; border: none; background-color: black; color: white;" placeholder="Ask a question..." />
              <button id="send" style="background-color: transparent; border: none; padding: 10px 20px;">
                <img src="static/send-icon.png" style="width: 20px; height: 20px;" />
              </button>
            </form>
        </div>          
    </div>
  </body>
</html>